<script lang="ts" setup>
import { useMyLoadingStore } from "~/stores/loading";

const loadingStore = useMyLoadingStore();
</script>

<template>
  <div class="h-2 top-0 z-20">
    <ClientOnly>
      <UProgress
        v-if="loadingStore.isLoading"
        size="sm"
        :value="loadingStore.loadingValue ?? 0"
        animation="carousel"
        class="theme"
      />
    </ClientOnly>
  </div>
</template>

<style>
.theme {
  background-color: repeating-linear-gradient(
    to right,
    rgb(0, 220, 130) 0%,
    rgb(52, 205, 254) 50%,
    rgb(0, 71, 225) 100%
  );
}
</style>
~/stores/loading.client
